<template>
  <section>桥接模式</section>
</template>

<script>
/**
 * @Description:桥接模式
 * @author ZY
 * @date 2022/11/23 22:41
 */
export default {
  name: "DesignBridge",
  data() {
    return {}
  },
  created() {
    console.log('*******桥接模式开始********')
    this.main()
    console.log('*******桥接模式结束********')
  },
  methods: {
    /*
    * 桥接模式：桥接模式（Bridge）将抽象部分与它的实现部分分离，使它们都可以独立地变化。
    * */
    main() {
      class Color {
        constructor(name) {
          this.name = name
        }
      }

      class Shape {
        constructor(name, color) {
          this.name = name
          this.color = color
        }

        draw() {
          console.log(`${this.color.name} ${this.name}`)
        }
      }

//测试
      let red = new Color('red')
      let yellow = new Color('yellow')
      let circle = new Shape('circle', red)
      circle.draw()
      let triangle = new Shape('triangle', yellow)
      triangle.draw()
    }
  }
}
</script>

<style scoped>

</style>
